<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.4/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/be_current.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>


</head>
<body class="bg-gray-100">

<!-- 右上角按钮容器 -->
<div class="top-right-buttons">
    <!--    <span class="navbar-text" id="username-display">用户:{{current_user()}}</span>-->
    <!-- 切换导航栏按钮 -->
    <button class="toggle-sidebar-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <i class="glyphicon glyphicon-list"></i>
    </button>
</div>
<!-- 侧边导航栏 -->
<div class="sidebar bg-gray-800 text-white flex flex-col justify-between h-screen">
    <!-- 导航栏顶部 -->
    <div>
        <div class="text-center py-4 border-b border-gray-700">
            <a href="#" class="text-blue-400 font-bold">新零售配送优化</a>
        </div>
        <div class="mt-4">
            <a href="" class="block px-4 py-3 hover:bg-gray-700 ">用户:{{current_user()}}</a>
            <a href="/optimize" class="block px-4 py-3 hover:bg-gray-700">路径优化</a>
            <a href="/history" class="block px-4 py-3 hover:bg-gray-700">历史记录</a>
            <a href="/setting" class="block px-4 py-3 hover:bg-gray-700">路径优化参数设置</a>
            <a href="/help" class="block px-4 py-3 hover:bg-gray-700">帮助/说明页</a>
        </div>

    </div>

    <!-- 导航栏底部 包含切换按钮  -->
    <div>
        <a href="/feedback" class="block px-4 py-3 hover:bg-gray-700">反馈与建议</a>
        <a href="/logout" class="block px-4 py-3 hover:bg-gray-700" onclick="confirmLogout(event)">退出登录</a>
    </div>

</div>
<!-- 主体内容 -->
<div class="flex justify-center items-start pt-16 h-screen"
     style="margin-right: 60px; padding-top: 100px; height: calc(100vh - 80px);">
    <div class="w-full max-w-7xl mx-auto ">
        <div class="panel panel-default">
            <div class="panel-heading"><span class="glyphicon glyphicon-search  " aria-hidden="true"></span> 历史记录
            </div>
            <table class="table table-bordered">
                <thead>
                <tr class="active">
                    <th class="px-4 py-2">ID</th>
                    <th class="px-4 py-2">计算数据</th>
                    <th class="px-4 py-2">计算结果</th>
                    <th class="px-4 py-2">种群大小</th>
                    <th class="px-4 py-2">迭代次数</th>
                    <th class="px-4 py-2">最大容量</th>
                    <th class="px-4 py-2">变异率</th>
                    <th class="px-4 py-2">计算时间</th>
                    <th class="px-4 py-2">优化结果</th>


                </tr>
                </thead>
                <tbody>
                <!--                [{'id': 1, 'userinfo_id': 2, 'upload_time': datetime.datetime(2024, 3, 24, 12, 19, 17), 'file_name': '用户上传文件的数据.txt', 'result_data': '1730.1935913062086', 'image_path': 'image\\solution.jpg'}]-->
                {% for row in row_list%}
                <tr>
                    <td>{{row.id}}</td>
                    <td><a href="{{ url_for('history.uploaded_files', filename=row.file_name|basename) }}">查看文件</a>
                    </td>
                    <td>{{row.result_data}}</td>
                    <td>{{row.population_size}}</td>
                    <td>{{row.n_generations}}</td>
                    <td>{{row.max_capacity}}</td>
                    <td>{{row.mutation_rate}}</td>
                    <td>{{row.upload_time}}</td>
                    <td><a href="{{ url_for('static', filename=row.image_path.replace('\\', '/')) }}">查看图片</a></td>
<!--                    <td>-->
<!--                        <a class="btn btn-primary"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>-->
<!--                        <a class="btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>-->
<!--                    </td>-->
                </tr>
                {% endfor %}
                </tbody>
            </table>

        </div>
        {{ pager() }}
    </div>
</div>

<script src="../static/js/history.js"></script>
<script src="../static/js/logout.js"></script>
<script src="../static/js/be_current.js"></script>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
